<template>
  <div class="flex">
    <el-dropdown :teleported="false">
      <span class="flex outline-none">
        {{ userStore.user?.name }}
        <el-icon><caret-bottom /></el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="formCode = true">
            个人中心
          </el-dropdown-item>
          <el-dropdown-item @click="handleLogout">
            退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <code-form
      v-model="formCode"
      @success="formCode = false"
    />
  </div>
</template>

<script setup>
import { CaretBottom } from '@element-plus/icons-vue'
import useUserStore from '@/store/user'
import CodeForm from './components/CodeForm.vue'

const userStore = useUserStore()
const handleLogout = () => {
  ElMessageBox.confirm('是否退出登录?', '退出提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    // 发出退出请求

    // 清空用户信息
    userStore.logOut()

    ElMessage({
      type: 'success',
      message: '退出成功!'
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消退出'
    })
  })
}

const formCode = ref(false)
</script>

<style lang="scss" scoped>
</style>
